<template>
  <el-form label-position="top">
    <el-form-item :label="title">
      <el-select v-model="form.setType">
        <el-option :value="item.value" :label="item.label" :disabled="item.disabled"
                   v-for="(item, index) in setTypeList" :key="item.value"></el-option>
      </el-select>
    </el-form-item>

    <el-form-item v-if="form.setType === 1 && props.userListScope === undefined" label="选择成员">
      <el-button
          type="primary"
          icon="el-icon-plus"
          round
          @click="selectHandle(1, form.nodeUserList)"
      >选择人员</el-button
      >
      <div class="tags-list">
        <el-tag
            v-for="(user, index) in form.nodeUserList"
            :key="user.id"
            closable
            @close="delUser(index)"
        >{{ user.name }}</el-tag
        >
      </div>
    </el-form-item>

    <el-form-item v-if="form.setType === 3" label="选择角色">
      <el-button
          type="primary"
          icon="el-icon-plus"
          round
          @click="selectHandle(3, form.nodeRoleList)"
      >选择角色</el-button
      >
      <div class="tags-list">
        <el-tag
            v-for="(role, index) in form.nodeRoleList"
            :key="role.id"
            type="info"
            closable
            @close="delRole(index)"
        >{{ role.name }}</el-tag
        >
      </div>
    </el-form-item>

    <el-form-item v-if="form.setType === 8" label="选择组织">
      <el-button
          type="primary"
          icon="el-icon-plus"
          round
          @click="selectHandle(8, form.nodeOrgList)"
      >选择组织</el-button
      >
      <div class="tags-list">
        <el-tag
            v-for="(org, index) in form.nodeOrgList"
            :key="org.id"
            type="info"
            closable
            @close="delOrg(index)"
        >{{ org.name }}</el-tag
        >
      </div>
    </el-form-item>
<!--已确定某组织或者角色下的用户-->
<!--    <el-form-item v-if="form.setType === 3 || form.setType === 8" label="可选择人员">-->
<!--      <el-button-->
<!--          type="primary"-->
<!--          icon="el-icon-plus"-->
<!--          round-->
<!--          @click="selectHandle(1, form.userListForOther,false)"-->
<!--      >选择人员</el-button-->
<!--      >-->
<!--      <div class="tags-list">-->
<!--        <el-tag-->
<!--            v-for="(user, index) in form.userListForOther"-->
<!--            :key="user.id"-->
<!--            closable-->
<!--            @close="delUser(index)"-->
<!--        >{{ user.name }}</el-tag-->
<!--        >-->
<!--      </div>-->
<!--    </el-form-item>-->

<!--    确认用户范围-->
    <el-form-item v-if="form.setType === 1 && props.userListScope" label="可选择人员">
      <el-button
          type="primary"
          icon="el-icon-plus"
          round
          @click="selectHandle(1, form.nodeUserList,false,props.userListScope)"
      >选择人员</el-button
      >
      <div class="tags-list">
        <el-tag
            v-for="(user, index) in form.nodeUserList"
            :key="user.id"
            closable
            @close="delUser(index)"
        >{{ user.name }}</el-tag
        >
      </div>
    </el-form-item>

    <el-form-item label="审批方式(单个审核直接按顺签方式进行审批即可)" v-if="props.examineModeFlag">
      <el-radio-group v-model="form.examineMode" :disabled="nodeDisabled">
        <p style="width: 100%"><el-radio :value="1">顺签 (按顺序依次审批)</el-radio></p>
        <p style="width: 100%">
          <el-radio :value="2">会签 (可同时审批，每个人必须审批通过)</el-radio>
        </p>
        <p style="width: 100%">
          <el-radio :value="3">或签 (有一人审批通过即可)</el-radio>
        </p>
      </el-radio-group>
    </el-form-item>
  </el-form>
  <use-select
      v-if="selectVisible"
      ref="useselect"
      @closed="selectVisible = false"></use-select>
</template>

<script lang="ts" setup name="assignerSelect">
import useSelect from '@/components/scWorkflow/select.vue'
import {
  defineAsyncComponent,
  ref,
  reactive,
  onMounted,
  nextTick,
  computed,
  watch
} from "vue";

const props = defineProps({
  type: {
    type: Number,
    required: false,
    default: ()=> {
      return 1;
    }
  },
  title: {
    type: String,
    required: true,
  },
  examineModeFlag: {
    type: Boolean,
    required: false,
    default: ()=> {
      return true;
    }
  },
  setTypes: {
    type: Array,
    required: false,
    default: ()=> {
      return [1,3,8];
    }
  },
  //当前环节的附属配置信息
  otherConfig: {
    type: Object,
    required: false,
    default: ()=> {
      return null;
    }
  },
  //默认返回数组,当true时只返回只含一个数据的数组
  hasOnlyOne: {
    type: Boolean,
    required: false,
    default: ()=> {
      return false;
    }
  },
  userListScope: {
    type: Array,
    required: false,
    default: ()=> {
      return undefined;
    }
  },
})
let selectVisible = ref(false);
const useselect = ref(null);

const setTypeList = reactive([{
  value: 1,label: '指定成员',disabled: false
},{
  value: 3,label: '指定角色',disabled: false
},{
  value: 8,label: '指定组织',disabled: false
}])

onMounted(() => {
  setTypeList.forEach(item => {
    item.disabled = props.setTypes?.indexOf(item.value) <= -1
  })
  if(props.otherConfig !== null && props.otherConfig.actorWay === 1){
    //当前环节的附属配置信息
    switch (props.otherConfig.actorWayType) {
      case 1://只显示人员
        form.value.setType = 1;
        setTypeList[1].disabled = true;
        setTypeList[2].disabled = true;
        break;
      case 3://只显示角色
        form.value.setType = 3;
        setTypeList[0].disabled = true;
        setTypeList[2].disabled = true;
        break;
      case 2://只显示部门
        form.value.setType = 8;
        setTypeList[0].disabled = true;
        setTypeList[1].disabled = true;
        break;
      case 4://自定义指定
        form.value.setType = 1;
    }
    if(props.otherConfig.taskActorConfigForNextStep && props.otherConfig.taskActorConfigForNextStep.length > 0){
      const taskActorConfigForNextStep = props.otherConfig.taskActorConfigForNextStep[props.otherConfig.taskActorConfigForNextStep.length - 1];
      form.value.setType = taskActorConfigForNextStep.setType;
      form.value.examineMode = taskActorConfigForNextStep.examineMode;
      switch (form.value.setType) {
        case 1:
          form.value.nodeUserList = taskActorConfigForNextStep.nodeUserList;
          break;
        case 3:
          form.value.nodeRoleList = taskActorConfigForNextStep.nodeRoleList;
          break;
        case 8:
          form.value.nodeOrgList = taskActorConfigForNextStep.nodeOrgList;
          break;
      }
    }
    if(props.otherConfig.examineMode){
      form.value.examineMode = props.otherConfig.examineMode;
    }
  }
});

const form = ref({
  nodeUserList: [],
  nodeRoleList: [],
  nodeOrgList: [],
  //确认某一组织或者角色下的用户人员
  userListForOther: [],
  setType: 1,
  examineMode: 1
});

let nodeDisabled = computed(()=>{
  if(form.value.setType === 3 || form.value.setType === 8){
    if(form.value.userListForOther.length === 0){
      //没有人选择的情况下
      if(form.value.setType === 3 && form.value.nodeRoleList.length < 2){
        form.value.examineMode = 1;
        return true;
      }else if(form.value.setType === 8 && form.value.nodeOrgList.length < 2){
        form.value.examineMode = 1;
        return true;
      }
    }else if(form.value.userListForOther.length < 2){
      form.value.examineMode = 1;
      return true;
    }
  }
  if(form.value.setType === 1){
    if(form.value.nodeUserList.length < 2){
      if(!form.value?.examineMode){
        form.value.examineMode = 1;
      }
      return true;
    }
  }
  return false;
})

const selectHandle = (setType,list,showOrgFlag: boolean = true,userListScope: any = undefined) =>{
  selectVisible.value = true
  nextTick(() => {
    if(!showOrgFlag){
      if(userListScope !== undefined){
        useselect.value.open(setType, list,{showOrg: false,hasOnlyOne: props.hasOnlyOne},userListScope)
      }else {
        //如果确定了某个组织或者角色 就只显示人员列表
        useselect.value.open(setType, list,{showOrg: false,groupFrom: form.value.setType === 3? "role":"org",groupFromId: props.currentActor.actorId,hasOnlyOne: props.hasOnlyOne})
      }
    }else {
      useselect.value.open(setType, list,{showOrg: true,groupFrom: "org",hasOnlyOne: props.hasOnlyOne});
    }
  })
}

const setData = (data)=> {
  form.value = data
  if(form.value.setType === 1){
    form.value.nodeRoleList = []
    form.value.nodeOrgList = []
  }else if(form.value.setType === 3){
    form.value.nodeUserList = []
    form.value.nodeOrgList = []
  }else if(form.value.setType === 8){
    form.value.nodeUserList = []
    form.value.nodeRoleList = []
  }
}

const getData = () => {
  const nodeConfig = {}
  nodeConfig.type = props.type
  nodeConfig.setType = form.value.setType
  nodeConfig.examineMode = form.value.examineMode
  if(form.value.setType === 1){
    nodeConfig.nodeUserList = form.value.nodeUserList
    if(nodeConfig.nodeUserList.length === 0){
      return null;
    }
  }else if(form.value.setType === 3){
    nodeConfig.nodeRoleList = form.value.nodeRoleList
    if(nodeConfig.nodeRoleList.length === 0){
      return null;
    }
  }else if(form.value.setType === 8){
    nodeConfig.nodeOrgList = form.value.nodeOrgList
    if(nodeConfig.nodeOrgList.length === 0){
      return null;
    }
  }
  return nodeConfig
}

const delUser = (index) => {
  form.value.nodeUserList.splice(index, 1);
}

const delRole = (index) => {
  form.value.nodeRoleList.splice(index, 1);
}

const delOrg = (index) => {
  form.value.nodeOrgList.splice(index, 1);
}

defineExpose({
  getData,setData
})

</script>

<style scoped>

</style>